Vue.js 条件渲染
v-if and v-else
Vue.js 为条件渲染提供了 v-if 以及 v-else 指令，其中 v-if 指令用于条件渲染一块内容，内容的表达式根据 truthy 值进行决定是否被渲染：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div id="app">
<p v-if="isMessage">{{message}}</p>
<p v-else="isMessage">This is v-else</p>
</div>
<script>
const app = Vue.createApp ({
data() {
return {
message: 'This is v-bind:style',
isMessage: false
}
}
})
const vm = app.mount('#app')
</script>
|
当 isMessage 属性的 truthy 值为 false 时，则会使用 v-else 进行代替，但为了之后适用与更加复杂的结构中 v-else 需要指定属性。
template
template 是一个字符串模板，用作组件(component) 实例标记，模板将会替代所挂载的元素内部 HTML(innerHTML)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <style>
.error {
border: 1px solid red;
padding: 0.5em;
color: red;
}
</style>
<div id="app">
<template v-if="isMessage">
<p v-if="isMessage">{{message}}</p>
<p>hey,v-if</p>
</template>
<div v-else="isMessage" :class="{error: isErr}">
<p>This is v-else="isMessage"</p>
</div>
</div>
<script>
const app = Vue.createApp ({
data() {
return {
message: 'This is v-bind:style',
isMessage: false,
isErr: true
}
}
})
const vm = app.mount('#app')
</script>
|
v-show
除 v-show 之外，Vue 还提供了另一条用于展示元素的 v-show 指令，他于 v-if 相差甚微：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <style>
.error {
border: 1px solid red;
padding: 0.5em;
color: red;
}
.warn {
border: 1px solid #ffaa00;
padding: 0.5em;
color: #ffaa00;
}
</style>
<div id="app">
<div v-if="isMessage">
<p>hey,v-if is "true"</p>
</div>
<div v-else-if="isMessage === null" :class="{error: isErr}">
<p>This is isMessage ="null"</p>
</div>
<div v-else-if="isMessage === undefined" :class="{error: isErr}">
<p>This is isMessage ="undefined"</p>
</div>
<div v-else :class="{warn: isWarn}">
<p>hey,v-if is "false"</p>
</div>
<div v-show="isMessage">
<p>Hey,world!</p>
</div>
</div>
<script>
const app = Vue.createApp ({
data() {
return {
isMessage: false,
isErr: true,
isWarn: true
}
}
})
const vm = app.mount('#app')
</script>
|
但不同的是 v-show 元素始终会被渲染并保留 DOM 中，因此 v-show 只是简单的切换元素的 display 属性。
与 v-if 的区别是他不支持 <template> 元素也不支持 v-else 指令
是 “真正” 的条件渲染，他会在切换的过程中，条件块内的事件监听器或子组件将会适当的被摧毁和更新。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
## v-else-if
该指令可以充当 ```v-if``` 的 ```else-if``` 块且可林需的使用，但必须紧跟 ```v-if``` 或 ```v-else-if``` 的元素之后：
```js
<style>
.error {
border: 1px solid red;
padding: 0.5em;
color: red;
}
.warn {
border: 1px solid #ffaa00;
padding: 0.5em;
color: #ffaa00;
}
</style>
<div id="app">
<div v-if="isMessage">
<p>hey,v-if is "true"</p>
</div>
<div v-else-if="isMessage === null" :class="{error: isErr}">
<p>This is isMessage ="null"</p>
</div>
<div v-else-if="isMessage === undefined" :class="{error: isErr}">
<p>This is isMessage ="undefined"</p>
</div>
<div v-else :class="{warn: isWarn}">
<p>hey,v-if is "false"</p>
</div>
</div>
<script>
const app = Vue.createApp ({
data() {
return {
isMessage: false,
isErr: true,
isWarn: true
}
}
})
const vm = app.mount('#app')
</script>
|
⬅️ Go back
